// src/components/EnergyCard.jsx
import React, { Component } from 'react';
import './energyCard.less';

class EnergyCard extends Component {
    state = {
        selectedType: 'Energy Monitoring',
    };

    dataMap = {
        'Energy Monitoring': {
            total: '25kwh',
            dayOverDay: '22.7kwh',
            lastDay: '10%',
        },
        'Power Usage': {
            total: '40kwh',
            dayOverDay: '35.2kwh',
            lastDay: '15%',
        },
        'Solar Input': {
            total: '15kwh',
            dayOverDay: '12.3kwh',
            lastDay: '8%',
        },
    };

    handleSelectChange = (e) => {
        this.setState({ selectedType: e.target.value });
    };

    render() {
        const { selectedType } = this.state;
        const data = this.dataMap[selectedType];

        return (
            <div className="energy-card">
                {/* 第一行：标题 + 下拉选择 */}
                <div className="header-row">
                    <span className="title">{selectedType}</span>
                    <select value={selectedType} onChange={this.handleSelectChange}>
                        {Object.keys(this.dataMap).map((type) => (
                            <option key={type} value={type}>
                                {type}
                            </option>
                        ))}
                    </select>
                </div>

                {/* 第二行：在线 / 离线 */}
                <div className="status-row">
                    <div className="status-block">
                        <div>
                            <span className="status-icon">📶</span>
                            <span className="status-number">5</span>
                        </div>
                        <div className="status-label">On-line</div>
                    </div>

                    <div className="divider" />

                    <div className="status-block">
                        <div className="status-number">0</div>
                        <div className="status-label">Off-line</div>
                    </div>
                </div>

                {/* 当前标题（与选择项保持一致） */}
                <div className="section-title">{selectedType}</div>

                {/* 动态数据显示区 */}
                <div className="data-row">
                    <span>Total</span>
                    <span>{data.total}</span>
                </div>

                <div className="data-row">
                    <span>Day-over-Day</span>
                    <span className="value">
                        {data.dayOverDay} <span className="arrow-up">▲</span>
                    </span>
                </div>

                <div className="data-row">
                    <span>Same Period Last Day</span>
                    <span className="value">
                        {data.lastDay} <span className="arrow-down">▼</span>
                    </span>
                </div>
            </div>
        );
    }
}

export default EnergyCard;
